export default (data) => {
// const data = [{
//     name: "18-30岁",
//     value: 754
//   },
//   {
//     name: "31-40岁",
//     value: 611
//   },
//   {
//     name: "41-50岁",
//     value: 400
//   },
//   {
//     name: "51-60岁",
//     value: 200
//   },
//   {
//     name: "60岁以上",
//     value: 200
//   }
// ];
const arrName = getArrayValue(data, "name");
const arrValue = getArrayValue(data, "value");
const sumValue = eval(arrValue.join('+'));
// const objData = array2obj(data, "name");
const optionData = getData(data)

function getArrayValue(array, key) {
  key = key || "value";
  var res = [];
  if (array) {
    array.forEach(function (t) {
      res.push(t[key]);
    });
  }
  return res;
}

// function array2obj(array, key) {
//   var resObj = {};
//   for (var i = 0; i < array.length; i++) {
//     resObj[array[i][key]] = array[i];
//   }
//   return resObj;
// }

function getData(data) {
  var res = {
    series: [],
    yAxis: []
  };
  for (let i = 0; i < data.length; i++) {
    // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
    res.series.push({
      name: '',
      type: 'pie',
      clockWise: false, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [83 - i * 15 + '%', 78 - i * 15 + '%'],
      center: ["50%", "40%"],
      label: {
        show: false
      },
      itemStyle: {
        label: {
          show: false,
        },
        labelLine: {
          show: false
        },
        borderWidth: 5,
      },
      data: [{
        value: data[i].value,
        name: data[i].name
      }, {
        value: sumValue - data[i].value,
        name: '',
        itemStyle: {
          color: "rgba(0,0,0,0)",
          borderWidth: 0
        },
        tooltip: {
          show: false
        },
        hoverAnimation: false
      }]
    });
    res.series.push({
      name: '',
      type: 'pie',
      silent: true,
      z: 1,
      clockWise: false, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [83 - i * 15 + '%', 78 - i * 15 + '%'],
      center: ["50%", "40%"],
      label: {
        show: false
      },
      itemStyle: {
        label: {
          show: false,
        },
        labelLine: {
          show: false
        },
        borderWidth: 5,
      },
      data: [{
        value: 7.5,
        itemStyle: {
          color: "rgb(3, 31, 62)",
          borderWidth: 0
        },
        tooltip: {
          show: false
        },
        hoverAnimation: false
      }, {
        value: 2.5,
        name: '',
        itemStyle: {
          color: "rgba(0,0,0,0)",
          borderWidth: 0
        },
        tooltip: {
          show: false
        },
        hoverAnimation: false
      }]
    });
    res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
  }
  return res;
}

const option = {
  // backgroundColor: '#000',
  legend: {
    orient: 'vertical',
    show: true,
    icon: "rect",
    width: 30,
    height: 30,
    left: "center",
    bottom: '3%',
    data: arrName,
    padding: [0, 5],
    itemGap: 25,
    // formatter: function (name) {
    //   return "{title|" + name
    // },

    textStyle: {
      color: "#FFFFFF",
      rich: {
        title: {
          fontSize: 24,
          lineHeight: 30,
          color: "rgb(255, 255, 255)"
        },
        value: {
          fontSize: 18,
          lineHeight: 20,
          color: "#FFFFFF"
        }
      }
    },
  },
  tooltip: {
    show: true,
    trigger: "item",
    formatter: "{a}<br>{b}:{c}({d}%)"
  },
  color: ['#80E6FF', '#FFBA69', '#F27575', '#D086FF', '#FF86BF'],
  grid: {
    top: '1.5%',
    bottom: '65.5%',
    left: "50%",
    containLabel: false
  },
  yAxis: [{
    type: 'category',
    inverse: true,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      interval: 0,
      inside: true,
      textStyle: {
        color: "#fff",
        fontSize: 16,
      },
      show: true
    },
    data: optionData.yAxis
  }],
  xAxis: [{
    show: false
  }],
  series: optionData.series
};

  return option

}

// export default option